<template>
	<view class="setting-page-box">
		<!-- #ifdef APP -->
		<u-navbar title="" :autoBack="true" bgColor="transparent" leftIconColor="#000000" titleStyle="color:#000000;"
			:placeholder="true"></u-navbar>
		<!-- #endif -->
		<image :src="pageBg" class="page-bg" v-if="pageBg"></image>
		<view class="setting-page">
			<view class="title">请选择性别</view>
			<view class="tips">性别选择注册完成后，将不可更改哦～</view>
			<view class="gender-box">
				<view class="gender-item" @click="gender=1">
					<image src="../../static/common/icon_nan.png" class="image"></image>
					<view class="select-box">
						<image src="../../static/common/icon_xuan.png" class="select" v-if="gender==2"></image>
						<image src="../../static/common/icon_xuan1.png" class="select" v-if="gender==1"></image>
						<view class="text">我是男生</view>
					</view>
				</view>
				<view class="gender-item" @click="gender=2">
					<image src="../../static/common/icon_nv.png" class="image"></image>
					<view class="select-box">
						<image src="../../static/common/icon_xuan.png" class="select" v-if="gender==1"></image>
						<image src="../../static/common/icon_xuan1.png" class="select" v-if="gender==2"></image>
						<view class="text">我是女生</view>
					</view>
				</view>
			</view>
			<view class="button-group">
				<view class="button1" @click="showConfirm = true">立即开启</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<u-popup :show="showConfirm" mode="center" round="18" :safeAreaInsetBottom="false">
			<view class="confirm-box">
				<image src="../../static/login/nv_image.png" class="gender-image" v-if="gender==2"></image>
				<image src="../../static/login/nan_image.png" class="gender-image" v-if="gender==1"></image>
				<view class="text-box">
					<view>你好 <span style="color: #F169F6;">{{gender==2?'女士':'男士'}}</span>,</view>
					<view> 注册完成后，您的性别将<span style="color: #F169F6;">无法更改</span></view>
				</view>
				<view class="button-group">
					<view class="button1" @click="showConfirm = false">我选错了</view>
					<view class="button2" @click="$u.throttle(confirmSex,2000)">好的</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gender: 1, //性别 1男 2女
				pageBg: '/static/login/loginBg.png',
				showConfirm: false,
				userInfo: null,
			}
		},
		onLoad() {},
		methods: {
			//确认性别
			confirmSex() {
				this.$Api['user'].updateUserInfo({
					gender: this.gender,
				}).then(res => {
					this.showConfirm = false
					uni.reLaunch({
						url: '/pages/mine/improve-user?gender=' + this.gender
					})
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.setting-page-box {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.page-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.setting-page {
			position: relative;
			width: 100%;
			z-index: 100;

			.title {
				font-size: 64rpx;
				color: #323334;
				padding-top: 60rpx;
				text-align: center;
				font-weight: bold;
				letter-spacing: 4rpx;
			}

			.tips {
				margin-top: 34rpx;
				font-size: 28rpx;
				color: #AFAFAF;
				text-align: center;
			}

			.gender-box {
				margin-top: 128rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 0 60rpx;

				.gender-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.image {
						width: 108rpx;
						height: 108rpx;
					}

					.select-box {
						display: flex;
						text-align: center;
						justify-content: center;
						margin-top: 40rpx;

						.select {
							width: 32rpx;
							height: 32rpx;
							margin-right: 22rpx;
						}

						.text {
							flex: 1;
							font-size: 28rpx;
							color: #606060;
						}
					}

				}
			}

			.button-group {

				.button1 {
					margin: 160rpx auto 0;
					width: 628rpx;
					height: 88rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}

		.confirm-box {
			width: 640rpx;
			height: 722rpx;
			background: linear-gradient(180deg, #FEDAFF 0%, #FFFFFF 20%);
			border-radius: 18rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			padding: 102rpx 62rpx 50rpx;
			box-sizing: border-box;

			.gender-image {
				width: 256rpx;
				height: 256rpx;
			}

			.text-box {
				text-align: left;
				font-size: 30rpx;
				color: #1C1A19;
				margin: 80rpx 14rpx 0;
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				font-size: 37rpx;
				color: #F169F6;
				margin-top: 54rpx;

				.button1 {
					width: 240rpx;
					height: 88rpx;
					font-size: 37rpx;
					color: #F169F6;
					text-align: center;
					line-height: 88rpx;
					border: 2rpx solid #F169F6;
					border-radius: 50rpx;
				}

				.button2 {
					width: 240rpx;
					height: 88rpx;
					font-size: 37rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 105, 246, 0.2);
					border-radius: 50rpx;
				}
			}
		}
	}
</style>